<template>
  <h1 class="row-title">普通展示</h1>
  <div class="row">
    <wl-button>default</wl-button>
    <wl-button type="primary">primary</wl-button>
    <wl-button type="success">success</wl-button>
    <wl-button type="warning">warning</wl-button>
    <wl-button type="info">info</wl-button>
    <wl-button type="danger">danger</wl-button>
  </div>
  <h1 class="row-title">朴素按钮</h1>
  <div class="row">
    <wl-button plain>default</wl-button>
    <wl-button type="primary" plain>primary</wl-button>
    <wl-button type="success" plain>success</wl-button>
    <wl-button type="warning" plain>warning</wl-button>
    <wl-button type="info" plain>info</wl-button>
    <wl-button type="danger" plain>danger</wl-button>
  </div>
  <h1 class="row-title">圆角按钮</h1>
  <div class="row">
    <wl-button plain round>default</wl-button>
    <wl-button type="primary" plain round>primary</wl-button>
    <wl-button type="success" plain round> success</wl-button>
    <wl-button type="warning" plain round>warning</wl-button>
    <wl-button type="info" plain round> info</wl-button>
    <wl-button type="danger" plain round>danger</wl-button>
  </div>
  <h1 class="row-title">禁用按钮</h1>
  <div class="row">
    <wl-button plain round disabled>default</wl-button>
    <wl-button type="primary" plain round disabled>primary</wl-button>
    <wl-button type="success" plain round disabled> success</wl-button>
    <wl-button type="warning" plain round disabled>warning</wl-button>
    <wl-button type="info" plain round disabled> info</wl-button>
    <wl-button type="danger" plain round disabled>danger</wl-button>
  </div>
  <h1 class="row-title">等待展示</h1>
  <div class="row">
    <wl-button loading>default</wl-button>
    <wl-button type="primary" loading>primary</wl-button>
    <wl-button type="success" loading>success</wl-button>
    <wl-button type="warning" loading>warning</wl-button>
    <wl-button type="info" loading>info</wl-button>
    <wl-button type="danger" loading>danger</wl-button>
    <wl-button type="danger" circle icon="user" />
  </div>
  <h1 class="row-title">size</h1>
  <div class="row">
    <wl-button type="primary" size="small">primary</wl-button>
    <wl-button type="primary" size="large" @click="onClick()" ref="btnRef">primary</wl-button>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue';

const btnRef = useTemplateRef('btnRef')
function onClick() {
  console.log(btnRef.value._ref)
}
</script>

<style lang="scss" scoped></style>
